import React, { Component } from 'react';
import { List } from '$yo-component';
import { Scroller, Touchable } from '$yo-component';
import Header from '$component/header/index.js';

import yoHistory from '$common/history';
import './index.scss';
require('es6-promise').polyfill();
require('isomorphic-fetch');
var Link=require('yo-router').Link

class skill extends Component {
    constructor() {
        super();
        this.state = {
           guifan: [{text:'',key: ++guid}],
            kuangjia: [{text:'',key: ++guid}],
            yuyan: [{text:'',key: ++guid}],
            kaifagongju: [{text:'',key: ++guid}],
            goujiangongju: [{text:'',key: ++guid}],
            houtaigongju: [{text:'',key: ++guid}],
            shujuku: [{text:'',key: ++guid}]
        };
    }
    getData(){
        fetch('http://localhost:3000/guifan')
        .then((response)=> {
            return response.json();
        })
        .then(stories=> {
            this.setState({
               guifan: stories
            });
        });
    }
    getData2(){
        fetch('http://localhost:3000/kuangjia')
        .then((response)=> {
            return response.json();
        })
        .then(stories=> {
            this.setState({
                kuangjia: stories
            });
        });
    }
    getData3(){
        fetch('http://localhost:3000/yuyan')
        .then((response)=> {
            return response.json();
        })
        .then(stories=> {
            this.setState({
                yuyan: stories
            });
        });
    }
    getData4(){
        fetch('http://localhost:3000/kaifagongju')
        .then((response)=> {
            return response.json();
        })
        .then(stories=> {
            this.setState({
                kaifagongju: stories
            });
        });
    }
    getData5(){
        fetch('http://localhost:3000/goujiangongju')
        .then((response)=> {
            return response.json();
        })
        .then(stories=> {
            this.setState({
                goujiangongju: stories
            });
        });
    }
    getData6(){
        fetch('http://localhost:3000/houtaigongju')
        .then((response)=> {
            return response.json();
        })
        .then(stories=> {
            this.setState({
                houtaigongju: stories
            });
        });
    }
    getData7(){
        fetch('http://localhost:3000/shujuku')
        .then((response)=> {
            return response.json();
        })
        .then(stories=> {
            this.setState({
                shujuku: stories
            });
        });
    }
    getContent() {
        return [1, 2, 3, 4, 5,6].map((item) => {
            return <div className="item" style={{ background: 'green' }} key={item}>{item}</div>;
        });
    }

    getGroup(i) {
        return (
            <div key={i} className="demo-group">
                <Scroller.Sticky>
                    <div style={{ height: 50, lineHeight: 50 + 'px' }} className="sticky-title">
                        <span>{'Sticky Header ' + i}</span>
                        <Touchable touchClass='touchable-opacity' onTap={() => {
                            Toast.show('sticky header ' + i);
                        }}>
                            <span className="touchable-right" style={{ float: 'right' }}>tap!</span>
                        </Touchable>
                    </div>
                </Scroller.Sticky>
                {this.getContent()}
            </div>
        );
    }
    componentWillMount(){
        this.getData();
        this.getData2();
        this.getData3();
        this.getData4();
        this.getData5();
        this.getData6();
        this.getData7();
    }
   
    render() {
        
        return (
            <div className="yo-flex">
                <Header title="技能页" />
                <Scroller extraClass="flex">
               
                    <h2 className="title">规范：</h2>
                    <List
                        ref="list"
                        extraClass="flex m-list"
                        dataSource={this.state.guifan}
                        renderItem={(item, i) => 

                            [<img className="imgss"  key={i} src={item.url}/>,
                            <div key={i+1} className="flex">
                                
                                <h3 className="title">{item.title}</h3>
                                <div>{item.content}</div>
                            </div>,<i  key={i+2} className="yo-ico more" ></i>]
                    }
                      
                    />
                    <h2 className="title">框架：</h2>
                    <List
                        ref="list"
                        extraClass="flex m-list"
                        dataSource={this.state.kuangjia}
                        renderItem={(item, i) => 
                            [<img className="imgss" src={item.url} alt="zzz" key={i}/>,
                            <div key={i+1} className="flex">
                                <h3 className="title">{item.title}</h3> <div>{item.content}</div></div>,<i key={i+2} className="yo-ico more" ></i>]
                    }
                       
                        
                        itemTouchClass={"item_contente" /* 传入字符串 */}
                        itemTouchClass={(item,i) => { return item.contente; } /* 传入函数 */}
                    />
                     <h2 className="title">语言</h2>
                    <List
                        ref="list"
                        extraClass="flex m-list"
                        dataSource={this.state.yuyan}
                        renderItem={(item, i) => 
                            [<img className="imgss"  src={item.url}  key={i}/>,
                            <div key={i+1} className="flex">
                                <h3 className="title">{item.title}</h3> <div>{item.content}</div></div>,<i key={i+2} className="yo-ico more" ></i>]
                    }
                        
                        
                        itemTouchClass={"item_contente" /* 传入字符串 */}
                        itemTouchClass={(item,i) => { return item.contente; } /* 传入函数 */}
                    />
                    <h2 className="title">开发工具：</h2>
                    <List
                        ref="list"
                        extraClass="flex m-list"
                        dataSource={this.state.kaifagongju}
                        renderItem={(item, i) => 
                            
                            [<img className="imgss" src={item.url}  key={i}/>,
                            <div key={i+1} className="flex">
                                <h3 className="title">{item.title}</h3> <div>{item.content}</div></div>,<i key={i+2} className="yo-ico more" ></i>]
                    }
                        
                    />
                    <h2 className="title">构建工具：</h2>
                    <List
                        ref="list"
                        extraClass="flex m-list"
                        dataSource={this.state.goujiangongju}
                        renderItem={(item, i) => 
                            
                            [<img className="imgss" src={item.url}  key={i}/>,
                            <div key={i+1} className="flex">
                                <h3 className="title">{item.title}</h3> <div>{item.content}</div></div>,<i key={i+2} className="yo-ico more" ></i>]
                    }
                       
                    />
                    <h2 className="title">后台：</h2>
                    <List
                        ref="list"
                        extraClass="flex m-list"
                        dataSource={this.state.houtaigongju}
                        renderItem={(item, i) => 
                          [<img className="imgss" src={item.url} key={i}/>,
                            <div key={i+1} className="flex">
                                <h3 className="title">{item.title}</h3> <div>{item.content}</div>
                            </div>,<i key={i+2} className="yo-ico more" ></i>]
                    }
                       
                    />
                    <h2 className="title">数据库</h2>
                    <List
                        ref="list"
                        extraClass="flex m-list"
                        dataSource={this.state.shujuku}
                        renderItem={(item, i) => 
                          [<img className="imgss" src={item.url} key={i} />,
                            <div key={i+1} className="flex">
                                <h3 className="title">{item.title}</h3> <div>{item.content}</div>
                            </div>,<i key={i+2} className="yo-ico more" ></i>]
                    }
                       
                    />
                </Scroller>
                
            </div>
        )
    }
}

let guid = -1;

export default skill;
